<template>
  <view style="width: 100%;height: 100%;">
    <z-paging v-if="data.firstLoaded || data.isCurrentPage" ref="paging" v-model="data.dataList" @query="queryList"
      :fixed="false">
      <block #refresher="{ refresherStatus }">
        <custom-refresher :status="refresherStatus" />
      </block>
      <!-- 销售/施工 -->
      <view class="list-box" v-if="props.tabVal == 0 || props.tabVal == 1">
        <view class="list-item" v-for="(item, index) in data.dataList" :key="index"
          @click="navToDetail('info', item.id)">
          <view class="list-item-title">
            <view class="title-box">{{ item.project_name || '待完善' }}</view>
            <block>
              <view class="tips-box" v-if="item.display_status == 10">待启动</view>
              <view class="tips-box" v-if="item.display_status == 15">待勘场</view>
              <view class="tips-box" v-if="item.display_status == 18">待勘场出图</view>
              <view class="tips-box" v-if="item.display_status == 20">待方案设计</view>
              <view class="tips-box" v-if="item.display_status == 25">待报价</view>
              <view class="tips-box" v-if="item.display_status == 30">洽谈中</view>
              <view class="tips-box" v-if="item.display_status == 40">已签约</view>
              <view class="tips-box" v-if="item.display_status == 45">施工中</view>
              <view class="tips-box" v-if="item.display_status == 50">已完工</view>
              <view class="tips-box" v-if="item.display_status == 55">待结算</view>
              <view class="tips-box" v-if="item.display_status == 60">款项付清</view>
              <view class="tips-box" v-if="item.display_status == 70">项目取消</view>
            </block>
          </view>
          <view class="list-item-data">
            <view class="list-item-data-lable-box">
              <view class="list-item-data-lable">{{ item.brand_name }}</view>
              <!-- <view class="list-item-data-lable_">新装修</view> -->
            </view>
            <view class="list-item-data-item">项目编号: {{ item.project_number || '暂无' }}</view>
            <view class="list-item-data-item">地址: {{ item.area + item.address }}</view>
            <view class="list-item-data-item">创建时间: {{ item.created_at }}</view>
          </view>
          <!-- <view class="list-item-btn">
						<uv-button text="上传设计图"></uv-button>
						<uv-button text="项目取消"></uv-button>
					</view> -->
        </view>
      </view>
      <!-- 增减项 -->
      <view class="list-box" v-if="props.tabVal == 2">
        <view class="list-item-2" v-for="(item, index) in data.dataList" :key="index"
          @click="navToDetail('zjx', item.id)">
          <view class="item-top">
            <view class="item-time">{{ item.project_number }}</view>
            <view class="item-tag" v-if="item.change_status == 10">等待报价</view>
            <view class="item-tag" v-if="item.change_status == 20">等待审核</view>
            <view class="item-tag" v-if="item.change_status == 30">等待二审</view>
            <view class="item-tag" v-if="item.change_status == 40">待支付</view>
            <view class="item-tag" v-if="item.change_status == 50">已支付待确认</view>
            <view class="item-tag" v-if="item.change_status == 60">已完成</view>
          </view>
          <view class="item-title">{{ item.project_name }}</view>
          <view class="item-bg">
            <view class="content-item">
              <view class="item-label">原因</view>
              <view class="item-value" v-if="item.reason_type == 1">客户原因</view>
              <view class="item-value" v-if="item.reason_type == 2">现场原因</view>
              <view class="item-value" v-if="item.reason_type == 3">其他</view>
            </view>
            <view class="content-item">
              <view class="item-label">预计工期</view>
              <view class="item-value">{{ item.increase_or_decrease == 1 ? item.expect_duration_days + '天' : '--' }}
              </view>
            </view>
            <view class="content-item">
              <view class="item-label">类型</view>
              <view class="item-value"> {{ item.increase_or_decrease == 1 ? '增项' : '减项' }}</view>
            </view>
            <view class="content-item">
              <view class="item-label">增减内容</view>
              <view class="item-value" v-if="item.change_content == 1">顶面工程</view>
              <view class="item-value" v-if="item.change_content == 2">地面工程</view>
              <view class="item-value" v-if="item.change_content == 3">墙面工程</view>
              <view class="item-value" v-if="item.change_content == 4">水电工程</view>
              <view class="item-value" v-if="item.change_content == 5">楼梯工程</view>
              <view class="item-value" v-if="item.change_content == 6">广告工程</view>
              <view class="item-value" v-if="item.change_content == 7">外立面工程</view>
              <view class="item-value" v-if="item.change_content == 8">其他工程</view>
            </view>
          </view>
          <!-- <view class="item-desc">内容说明：{{item.construction_content}}</view> -->
          <view class="item-desc">申请时间：{{ item.created_at }}</view>
        </view>
      </view>
      <!-- 售后 -->
      <view class="list-box" v-if="props.tabVal == 3">
        <view class="list-item-2" v-for="(item, index) in data.dataList" :key="index"
          @click="navToDetail('sh', item.id)">
          <view class="item-top">
            <view class="item-time">{{ item.project_number }}</view>
            <view class="item-tag" v-if="item.after_sales_status == 10">待派单</view>
            <view class="item-tag" v-if="item.after_sales_status == 20">待分配</view>
            <view class="item-tag" v-if="item.after_sales_status == 30">待现场确认</view>
            <view class="item-tag" v-if="item.after_sales_status == 40">待总部确认</view>
            <view class="item-tag" v-if="item.after_sales_status == 50">售后施工中</view>
            <view class="item-tag" v-if="item.after_sales_status == 60">售后完成</view>
          </view>
          <view class="item-title">{{ item.project_name }}</view>
          <view class="item-bg">

            <view class="content-item">
              <view class="item-label">发起人</view>
              <view class="item-value">{{ item.user_name }}</view>
            </view>
            <view class="content-item">
              <view class="item-label">工程监理</view>
              <view class="item-value">{{ item.engineering_supervision_name }}</view>
            </view>
            <view class="content-item">
              <view class="item-label">工程经理</view>
              <view class="item-value">{{ item.engineering_manager_name ?? '--' }}</view>
            </view>
          </view>
          <view class="item-desc">内容描述：{{ item.problem_content }}</view>
          <view class="item-desc">申请时间：{{ item.created_at }}</view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import {
  reactive,
  getCurrentInstance,
  watch
} from 'vue';
const {
  proxy: that
} = getCurrentInstance();

let props = defineProps({
  tabIndex: {
    type: Number,
    default: () => {
      return 0
    }
  },
  // 当前swiper切换到第几个index
  currentIndex: {
    type: Number,
    default: () => {
      return 0
    }
  },
	tabVal: {
		type: Number,
		default: () => {
		  return 0
		}
	},
  keyword: {
    type: String,
    default: () => {
      return ''
    }
  },
});

const data = reactive({
  firstLoaded: false,
  isCurrentPage: false,
})

watch(() => props.currentIndex, (newVal) => {
  if (newVal === props.tabIndex) {
    // 懒加载，当滑动到当前的item时，才去加载
    if (!data.firstLoaded) {
      // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
      that.$nextTick(() => {
        setTimeout(() => {
          data.isCurrentPage = true;
        }, 100);
      })
    } else {
      that.$refs.paging.scrollToTop();
    }
  }
}, {
  immediate: true
})

watch(() => props.keyword, (newVal) => {
  that.$refs.paging && that.$refs.paging.reload();
}, {
  immediate: true
})

function reload() {
  that.$nextTick(() => {
    that.$refs.paging && that.$refs.paging.reload();
  })
}

// 项目详情
const navToDetail = (type, id) => {
  let path = '';
  let position_id = uni.getStorageSync('userInfo').position_id;
  switch (type) {
    case 'info':
      if (position_id == 12 || position_id == 11) {
        path = '/pagesA/project_detail_kh/project_detail_kh?id=' + id;
      } else {
        path = '/pagesA/project_schedule/project_schedule?id=' + id;
      }
      break;
    case 'zjx':
      path = '/pages/increase_decrease_items/idi_info/idi_info?id=' + id;
      break;
    case 'sh':
      path = '/pages/after_sales_list/as_info/as_info?id=' + id;
      break;
  }
  uni.navigateTo({
    url: path
  });
}

// 加载更多
const queryList = (page, num) => {
  getProjectList({
    page,
    num,
    keyword: props.keyword
  });
}

// 项目列表
const getProjectList = (obj) => {
  let request = null;
  if (props.tabVal == 2) {
    request = that.$hApi.getChangeList(obj);
  } else if (props.tabVal == 3) {
    request = that.$hApi.getAfterSalesList(obj);
  } else {
		if(props.tabVal == 1){
			obj.greater_status = 1;
		}
    request = that.$Api.getProjectList(obj);
  }
  request.then(res => {
    console.log(res, '项目列表')
    if (res.code == 200) {
      data.firstLoaded = true;
      that.$refs.paging.complete(res.data.list);
    } else {
      that.$refs.paging.complete([]);
    }
  })
}

defineExpose({
  reload
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>